*{
    padding: 0;
    margin: 0;
}

input{
    outline: none;
}

.icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

body{
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    align-content: center;
}

header{
    width: 100%;
    height: 70px;
    background-color: white;
    border-bottom: 1px solid #ddd;
}

nav{
    width: 95%;
    height: 70px;
    margin: auto;
    background-color: white;
}

nav div{
    display: inline-block;
}

.logo{
    width: 200px;
    height: 70px;/*
    background-color: lightcyan;*/
    text-align: center;
    line-height: 70px;
    font-size: 25px;
    color: gray;
    position: absolute;
}

.logo img{
    width:200px;
    height: 70px;
}

/*-----shenglue的导航nav*/
/*.nav_choice{
    width: auto;
    height: 60px;
    position: absolute;
    left: 290px;
}

.nav_choice ul li{
    cursor: pointer;
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
    height: 70px;
    float: left;
    list-style: none;
    font-size: 16px;
    line-height: 80px;

}

.nav_choice ul li:hover{
    color: red;
}*/



.nav_login{
    width: auto;
    height: 70px;
    position: absolute;
    right: 2.5%;
    /*display: none;*/
}

.nav_login ul li{
    cursor: pointer;
    color: gray;
    float: left;
    list-style: none;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 80px;
}

.nav_login ul li:hover{
    color: red;
}


/*已登录*/
 #img_own{
    width: 50px;
    height: 50px;
    background-color: #ddd;
    text-align: center;
    margin-top: 10px;
    position: absolute;
    right: 2.5%;
    border-radius: 100%;
    display: none;
}



/*=================================================
    身体部分
=============================================*/        
 section {
    margin: 0 auto;
    margin-top: 40px;
    width: 100%;/*
    height: 1800px;*/
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    align-items: center;
}

.lunbo{
    width: 1200px;
    height: 450px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    align-items: center;
    position: relative;
}

/*轮播那一栏*/

.panel {
    height: 450px;
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    align-items: center;
}

.panel1 {
    width: 220px;
    height: 450px;
    z-index: 4;
    position: absolute;
    left: 0px;
    /*background-color: black;*/

   /* opacity: 0.5;*/
}

.panel3{

    width: 220px;
    height: 450px;
    background-color: black;
    opacity: 0.2;
    position: absolute;
    left: 0px;
    z-index: 3;
}

/*.panel4{
width: 680px;
height: 450px;
background-color: white;
z-index: 300;
position: absolute;
left: 220px;

}*/

.panel2 {
    width:1200px;
    background-color: lightblue;
    position: absolute;
    left: 0px;
}

/*---------面板1--左侧导航栏------------------*/

.panel1>ul>li {
    list-style: none;
    width: 100%;
    height: 75px;

    text-align: center;

    line-height: 75px;
    font-size: 13px;
    color: white;;
    font-size: 16px;
}

/*.panel1 ul li:hover{
    background-color: black;
    opacity: 0.7;
}*/

.panel1>ul>li>a{/*
    margin-left: 20px;*/
    text-align: left;
    display: block;
    width: 220px;
    color: white;
    text-decoration: none;
    border-bottom: 0.5px solid #ddd;
}

.panel1>ul>li>a>span:nth-child(1){
   text-align: left;
    margin-left: 20px;
}

 .panel1>ul>li>a>span:nth-child(2){
   float: right;
     margin-right: 20px;
     font-size: 20px;
}

.showfuc_box{
    width: 740px;
    height: 200px;
    border-radius: 8px;
    position: absolute;
    left: 220px;
    background-color: white;
    color: black;    
    display: none;
    box-shadow:0px 2px 6px gray;
}

.func_bot1{
    top: 0px;
    background-image: url(../images/lunbo/bg2.jpg);
}

.func_bot2{
    top: 75px;
    background-image: url(../images/lunbo/bg1.jpg);
}

.func_bot3{
    top: 150px;
    background-image: url(../images/lunbo/bg3.jpg);
}

.func_bot4{
    top: 100px;
    background-image: url(../images/lunbo/bg9.jpg);
}

.func_bot5{
    top: 175px;
    background-image: url(../images/lunbo/bg8.jpg);
}

.func_bot6{
    top: 250px;
    background-image: url(../images/lunbo/bg7.jpg);
}

/*.show_fun{
display: block;
}*/

.showfuc_box>div{
    width: 100%;
    height: 60px;
    line-height: 30px;

}

.showfuc_box>div>span{
    margin-top: 30px;
    float: left;
    margin-left: 30px;
    font-size: 18px;
    color: red;
    font-weight: 600;
}
.showfuc_box > ul > li{
    list-style: none;
    width: auto;
    height: 20px;;
    padding-left: 25px;
    padding-right: 20px;
    margin-bottom: 10px;
    text-decoration: underline;
    color: black;
    float: left;
    font-size: 14px;
    line-height: 20px;
}

.showfuc_box > ul > li:not([class="border-none"]){
    border-right: 1px solid #ddd;
}

.showfuc_box > ul > li:hover{
    cursor: pointer;
    color: red;
    font-style: italic;
}



/*-------------中间轮播------------------*/
.pic{

    width: 1200px;
    height: 450px;
    display: none;
}

.pic img{
    width: 1200px;
    height: 450px;
}

.show{
    display: block;
}

/*轮播下面的小圆点*/
.selects1{
    position: absolute;
    /*margin-top: 215px;*/
    bottom: 0px;
    right: 0px;
    width: 275px;
    height: 20px;
    border-radius: 8px;
}

.cc{
    width: 8px;
    height: 8px;
    background-color: white;
    display: inline-block;
    border-radius: 15px;
    margin-top: 3px;
    margin-left: 20px;
    cursor: pointer;
    border:2px solid gray;
}

.h{
    background-color: red;
}

/*轮播的左右两个按钮*/
.left, .right{
    position: absolute;
    width: 30px;
    height: 60px;
    background-color: white;
    opacity: 0.3;
    cursor: pointer;
    display:none;
    /*z-index: -2000;*/
}

.left{
    left: 220px;
}

.left img{
    position: relative;
    left: -8px;
    top: 5px;
}

.right{
    right: 0px;
}

.right img{
    position: relative;
    right: 8px;
    top: 5px;
}



.left:hover, .right:hover{
    opacity: 0.6;
}

/*--------------轮播下面的推荐------------------*/
/*.show_classes{
    width: 1200px;
    height: 120px;
    background-color: white;

}

.show_classes div{
    width: 239px;
    height: 120px;
    display: inline-block;
    text-align: center;
    position: relative;
    cursor:pointer;

}

.show_classes div:not([class="android_index"]){
    border-bottom: 1px solid #ddd;
}

.show_classes div:not([class="web_index"]){
    margin-left: -4px;
}

.show_classes>div>img{
    display: block;
    margin-left: 90px;
    margin-top: 20px;
    border-radius: 100%;
}
.show_classes>div>span{
    display: block;
    margin-top: 10px;
}*/

/*----------------------推荐---------------------------*/
.recommend{
width: 100%;
height: 600px;
background-color: #ddd;
}

/*----------------四个实时推荐（最新、最热、更新、点击最多）---------------------*/
.hot_recoment{
    width: 100%;
    height: auto;
    background-size: 100% 100%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}


/*推荐小标题*/
.msg_card{
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    color: #085da5;
    font-weight: 600;
    letter-spacing: 2px;
}

.show_recom{
    width: 1200px;
    margin: 0 auto;
    height: 240px;

    background-color: white;
}

.left_card, .right_card{
    display: inline-block;
    opacity: 0.6;
    width: 60px;
    height: 60px;
    position: relative;
    top: -150px;

}

.left_card>img,.right_card>img{
    width: 60px;
    height: 60px;
}

.left_card{
    margin-left: 30px;

}
.right_card{
    float: right;
    margin-right: 30px;
}

/*---轮播三张---*/
.three_card{
    width: 1000px;
    height: 240px;
    margin: 0 auto;
    background-color: white;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.rec_rec .three_card{
	height:auto;
}

.rec_rec .show_recom{
	height:auto;
}

.ppt_card{
    width: 3000px;
    height: 220px;
    position: absolute;
    left: -1000px;
    background:url("../images/loading/loding1.gif") no-repeat 50% 50%;
    background-color: transparent;
    z-index: 6;
}
.rec_card{
	width:1000px;
	height:220px;
    z-index: 6;
}


.ppt_card a, .rec_card a{
    text-decoration: none;
}

.ppt_card li, .rec_card li{
    list-style: none;
    width: 130px;
    height: 180px;
    float: left;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.rec_card li{
	
    padding-bottom: 30px;
}

.ppt_card li:hover{
    box-shadow: 2px 0px 3px lightgray,
                -2px 0px 3px lightgray,
                0px 4px 8px lightgray,
                0px 0px 0px lightgray;
}



.li_img{
    width: 130px;
    height: 130px;
    background-color: white;
    border-radius: 130px;
   /* border: 1.5px solid #ddd;*/

}

.li_img img{
    width: 130px;
    height: 130px;
    /*margin: 15px;*/
    border-radius: 100%;
}

.li_img img:hover{
    animation-name: picrotate;
    animation-delay: 0;
    animation-duration: 1s;
    animation-timing-function: linear;
}

.li_img p{
    color: black;
    margin-bottom: 30px;
    position: relative;
    bottom: 70px;
    margin-left: 12px;
    width: 100px;
    text-align: center;
}



@keyframes picrotate{
    0%{
        transform: rotate(0deg);
    }50%{
        transform: rotate(40deg);
    }100%{
        transform: rotate(0deg);
    }
    
}

/*.ppt_card li p{
    color: black;
    text-align: center;
    margin-bottom: 5px;
    margin-top: -80px;
    position: absolute;
    width: 100px;
    margin-left: 12px;
    
}*/

/*.ppt_card li p:hover{
    animation-name: picrotate;
    animation-delay: 0;
    animation-duration: 1s;
    animation-timing-function: linear;
    
}*/

#ul_move4 li p
{
    color: white;
}

.classlevel{
    color: gray;
    position: relative;
    padding-left: 15px;
    bottom:-5px;
}

.createtime{
    color: gray;
    position: relative;
    bottom: -10px;
    padding-left: 14px;
    font-size: 14px;
    text-align:center;
}

.createtime span{
    color: red;
}

/*.ppt_card li p:nth-child(3){
color: red;
}*/


/*-----------------------脚部---------------------------*/
footer{
    width: 100%;
    height: 20px;
    margin-top: 20px;
    background-color: white;
    text-align: center;
}

/*---------------随页面滚动的---------------------*/
.scroll_dov{
    width: 50px;
    height: 50px;
    background-color: white;
    box-shadow:-2px 0px 18px lightgray,
            0px 2px 4px lightgray;;    
    position: fixed;
    right: 0px;
    top: 70%;
    text-align: center;
}

.icon_top{
    font-size: 38px;
    margin-top: 5px;
    color: gray;
}

.icon_top:hover{
    color: red;
}
